<template>
	<view class="container">

		<view class="dl_box">
			<view class="logo">

			</view>

			<view class="">

				<view class="input">
					<input class="uni-input" placeholder="请输入手机号" type="number" :value="mobile" @input="mobileInput"
						maxlength="11" data-key="mobile" />
				</view>

			</view>

			<view class="">

				<view class="input">

					<input class="uni-input" style="background-color: transparent;" :password="showPassword"
						type="mobile" value="" placeholder="验证码" maxlength="20" data-key="pwd" @input="pwdInput" />
					<uni-icons v-show="pwd!=''" style="right: 30px;" class="close" type="close" size="20"
						@click=""></uni-icons>
					<uni-icons class="look" :type="showPassword ? 'eye' : 'eye-filled'" size="20"
						@click="changePassword"></uni-icons>
					<button class="button" type="default" :disabled="codebtn" @click="getcode"
						v-cloak>{{codetext}}</button>
				</view>
			</view>
			<view class="dl_button " @click="login" :disabled="loading">
				登录
			</view>
			<view class="wnagjmm" @click="jump" data-src='./login'>
				密码登录
			</view>
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				showPassword: true,
				codebtn:false,
				width: 0,
				height: 0,
				mobile: '',
				pwd: '',
				systemInfo: {},
				loading: false,
				cid: '', // 消息推送模块参数
				denglu: '',
				codetext: '获取验证码',
				codenum:60
			};
		},
		onLoad: function() {
			uni.hideLoading()
		},
		onBackPress(options) {
			this.back();
			return true;
		},
		methods: {
			ok_look(e) {
				console.log(e.detail.value[0]);
				this.denglu = e.detail.value[0]
			},
			changePassword: function() {
				this.showPassword = !this.showPassword;
			},
			getcode() {
				if (this.mobile == "") {
					uni.showToast({
						title: '请输入手机号',
						icon: "none"
					});
				}else {
					uni.request({
						url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=account.verifycode&app=1',
						method: 'POST',
						data: {
							mobile: this.mobile,
							temp: 'sms_forget'
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: res => {
							uni.showToast({
								title: res.data.result.message,
								icon: "none"
							});
							if (res.data.status == 1) {
								this.codebtn = true
								var codetexts = setInterval(() => {
									this.codenum = this.codenum - 1
									this.codetext = this.codenum + 's'
								}, 1000)
								setTimeout(() => {
									this.codebtn = false
									clearInterval(codetexts);
									this.codetext = '重新发送'
								}, 60000)
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			back() {
				uni.reLaunch({
					url: '../home/home'
				});
			},
			mobileInput(e) {
				this.mobile = e.target.value
			},
			pwdInput(e) {
				this.pwd = e.target.value
			},
			jump(e) {

				uni.navigateTo({
					url: e.currentTarget.dataset.src
				});
			},
			login() {
				this.loading = true
				if (this.mobile == "") {
					this.loading = false
					uni.showToast({
						title: '请输入手机号',
						icon: "none"
					});
				} else if (this.pwd == "") {
					this.loading = false
					uni.showToast({
						title: '请输入验证码',
						icon: "none"
					});
				} else {
					console.log(this.cid)
					var data = {
						'mobile': this.mobile,
						'code': this.pwd,
						
					}


					uni.request({
						url: this.$BASE_URL +
							'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=account.code_login&app=1',
						method: 'POST',
						data: data,
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: res => {
							// console.log(JSON.stringify(res));return false;
							if (res.data.status == 0) {
								uni.showToast({
									title: res.data.result.message,
									icon: "none"
								});
								this.loading = false
							} else {
								uni.setStorage({
									key: 'openid',
									data: res.data.result.openid,
									success: (res) => {},
									fail: () => {}
								})
								uni.setStorage({
									key: 'mid',
									data: res.data.result.mid,
									success: (res) => {},
									fail: () => {}
								})
								setTimeout(() => {
									this.loading = false
									uni.reLaunch({
										url: '/pagesZA/media/media'
									});
								}, 500)
							}
						},
						fail: () => {},
						complete: () => {}
					});

				}
			}
		}
	}
</script>

<style lang="less">
	page {
		height: 100vh;
		width: 100vw;
	}

	.container {
		height: 100vh;
		width: 100vw;
		background: url('/static/zn/code_login_bg.png') 0 0 no-repeat;

		background-size: 100% 100%;
		box-sizing: border-box;
		padding: 130px 15px 52px;

	}

	.button {
		width: 35%;
		background-color: #180185;
		color: #fff;
		border-radius: 5px;
		padding: 2px;
		text-align: center;
		height: 30px;
		font-size: 12px;
	}

	.top_bar {
		color: #fff;
		display: flex;
		justify-content: space-around;

		.dl {
			font-size: 24px;
			font-weight: 700;
			border-bottom: 3px solid #fff;
		}

		.zc {
			font-size: 19px;
			padding-bottom: 3px;
		}
	}

	.dl_box {
		width: 100%;


		background-size: cover;
		padding: 31px 41px;
		display: flex;
		flex-direction: column;

		// align-items: center;
		.logo {
			width: 50%;
			height: 250rpx;
			background: url('/static/zn/logo.png')0 0 no-repeat;
			background-size: 100% 100%;
			margin: 0 auto;
		}

		.dl_top {
			color: #fff;
			font-size: 26px;
			margin-bottom: 15px;
			text-align: center;

		}

		.input_name {
			color: #fff;
		}

		.input {

			display: flex;
			position: relative;
			background-color: transparent;
			border-bottom: 1px solid #8378A0;

			.uni-input {
				color: #fff;
				background-color: transparent;
			}

			.close,
			.look {
				position: absolute;
				right: 2px;
				top: 0;
				bottom: 0;
				margin: auto;
			}

		}
	}

	.dl_box>view {
		// border: 1px solid red;
	}

	.dl_button {

		margin-top: 52px;
		height: 45px;
		background-color: #180185;
		border-radius: 15px;
		font-size: 20px;
		color: #fff;
		text-align: center;
		line-height: 45px;
	}

	.wnagjmm {
		margin: 20rpx 0;
		text-align: center;
		color: #fff;
	}

	.ok_look {
		width: 100%;
		text-align: center;
	}

	.bottom {
		width: 100%;
		color: #4481ff;
		text-align: center;
	}
</style>